{% extends "base.html" %}
{% load authorization_tags %}
{% load event_tags %}
{% block content %}
    {{ block.super }}
    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    {{ name }}
                </div>
            </div>
            {% if surveys %}
            <div class="panel panel-default table-responsive">
                <table id="groups" class="tablesorter-bootstrap table table-condensed table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Question Count</th>
                            <th>Active</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for survey in surveys %}
                            <tr>
                                <td>
                                    {% if "dojo.change_engagement_survey"|has_configuration_permission:request %}
                                    <a title="{{ survey.name }}" href="{% url 'edit_questionnaire' survey.id %}">{{ survey.name }}</a>
                                    {% else %}
                                    {{ survey.name }}
                                    {% endif %}
                                    </td>
                                <td class="nowrap">{{ survey.questions.all|length }}</td>
                                <td>{{ survey.active }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=surveys page_size=True %}
                </div>
            {% else %}
                No questionnaires found.
            {% endif %}
        
            <div class="panel panel-default">
                <div class="panel-heading">
                    General Questionnaires
                    {% if "dojo.add_engagement_survey"|has_configuration_permission:request %}
                    <a title="Add Questionnaire" class="pull-right btn btn-sm btn-primary" href="/empty_questionnaire"><span class="fa-solid fa-plus"></span></a>
                    {% endif %}
                </div>
                <div class="panel-body">
                    {% if general %}
                        <table id="general" class="tablesorter-bootstrap table table-condensed table-striped">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Number Responses</th>
                                <th>Generated</th>
                                <th>Expiration</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            {% for survey in general %}
                                <tr>
                                    <td>{{ survey.survey.name }}</td>
                                    <td algin="center">{{ survey.num_responses }}</td> 
                                    <td>{{ survey.generated }}</td>
                                    <td>{{ survey.expiration }}</td> 
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-secondary" data-toggle="modal"
                                                    data-target="#shareQuestionnaireModal"
                                                    data-whatever="/empty_questionnaire/{{ survey.id }}/answer">
                                                <i class="fa-solid fa-share"></i> Share Questionnaire
                                            </button>
                                            {% if "dojo.delete_engagement_survey"|has_configuration_permission:request %}
                                            <a class="btn btn-sm btn-danger"
                                                href="general_questionnaire/{{ survey.id }}/delete"> Delete
                                            Questionnaire </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    {% else %}
                        <div class="panel-body">
                            <p>No questionnaires found.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="panel panel-default filters">
                {% if filtered.form %}
                {% if "dojo.add_engagement_survey"|has_configuration_permission:request %}
                        <div class="panel-heading">Actions</div>
                        <div class="panel-body centered">
                            <a class="btn btn-sm btn-secondary" href="{% url 'create_questionnaire' %}">
                                Create Questionnaire
                            </a>
                        </div>
                    {% endif %}
                    <div class="panel-heading">Filters</div>
                    <form method="get" class="panel-body">
                        {% for field in filtered.form.visible_fields %}
                            <div class="form-group">
                                {{ field.errors }}
                                <label for="{{ field.auto_id }}" style="display: block;">{{ field.label }}</label>
                                {% with placeholder="placeholder:"|add:field.label %}
                                    {{ field|addcss:"class:form-control input-sm"|addcss:placeholder }}
                                {% endwith %}
                            </div>
                        {% endfor %}
                        <div class="centered">
                            <input type="submit" class="btn btn-secondary inline top" label="submit" value="Apply"/><br/><br/>
                            <a href="{% url 'questionnaire' %}"> [Clear Filters] </a>
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="modal fade" id="shareQuestionnaireModal" tabindex="-1" role="dialog" aria-labelledby="shareQuestionnaireModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="shareQuestionnaireModalLabel">Share Questionnaire Link</h4>
                </div>
                <div class="modal-body">
                    <p id="questionnaireURL"></p>
                    <div class="alert alert-info" role="alert">
                        <b>Note:</b> Only users that are authorized for {{ eng.product}} will be allowed to answer
                        this questionnaire.
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block postscript %}
    {{ block.super }}
    <script type="application/javascript">
        $('#shareQuestionnaireModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var path = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            var http = location.protocol;
            var slashes = http.concat("//");
            var host = slashes.concat(window.location.host);
            modal.find('p#questionnaireURL').text('Questionnaire URL: ' + host + path)
        })
    </script>
{% endblock postscript %}

